<template>
  <div class="main">
    <div class="analysis">
      <section class="left-nav" :class="{ 'left_active': left_active }">
  
          <article  class="left-main ">
            <h4  @click="active_index=0"   class="item_btn" :style="{     color:  active_index ==0?'#e6a23c':''}" >大盘</h4>
            <h4  @click="active_index=1"   class="item_btn" :style="{     color:  active_index ==1?'#e6a23c':''}" >美股港股</h4>
            <h4  @click="active_index=2"   class="item_btn" :style="{     color:  active_index >1?'#e6a23c':''}" >基金股票</h4>
            <ul  :style="{width: active_index==0?'0px':'auto'}">
                  <li v-for="(item, index) in btn_array" :class="{ 'active': active_index === index+3 }"
                    class="title-item flex-c" @click="toBtn1(item.num, index)">
                    <div class="tba-nav"  :class="item.目前状态=='持有'?'select':''">
                      {{ item.name }}({{ item.tip }})
                      <p>
                        {{ item.num }} 
                      </p>
                    </div>
                  </li>
               
                </ul>
            </article>
            
      </section>
    
      <section  class="right-main flex-item" v-if="active_index>1">
        <div class="bar flex-c">
               <el-button :type="left_active==true?'':'primary'" icon="el-icon-s-operation" @click="left_active=!left_active">更多</el-button>
                <span class="ge"></span>
                <el-input v-model="input_name1" placeholder="请输入权重股" width="60px" />
                <span class="ge"></span>
                <el-input v-model="zzzs_input_num" placeholder="请输入中证指数"  width="60px" />
                <span class="ge"></span>
              
                <el-input v-model="input_name7" placeholder="请输入买入日期" width="60px" />
                <span class="ge"></span>
                <button @click="toBtn(1)" class="left_btn">确定提交</button>
        </div>
        <analysisTab ref="analysisTab" v-if="viewType" :input_name1="input_name1" :input_name6="input_name6"
          :zzzs_input_num="zzzs_input_num" :array_all="array_all" :main_datalist_table="main_datalist_table"
          :main_markline="main_markline" :testtext2="testtext2" :calculate_array_active="calculate_array_active">
        </analysisTab>
      </section>      
      <section class="right-main flex-item"  v-if="active_index<2">
        <sectionBox2  v-if="active_index==0"></sectionBox2>
        <sectionBox4  v-if="active_index==1"></sectionBox4>
      </section>
   
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import histogramFund from "./analysisItem/histogramFund.vue";
import classification from "./analysisItem/classification.vue";
import {
  switchUrlDeal,
  dealData,
  urlDeal,
  btn_array2,
} from "./analysisItem/getUrl";
import { my_hold_sector } from "../person/url_name/excel/dingding.js";
import excelUtil from "../person/js/excelUtil.js";
import analysisTab from "./analysisItem/tab.vue";
import calculateStopLossBox from "./analysisItem/common/calculateStopLoss.vue";
import indexView from "./index.vue";
export default {
  name: 'Analysis',
  data() {
    return {
      viewType: false,
      array_all: [],
      main_datalist_table: [],
      datalist_table: [],
      datalist_table2: [],
      btn_array: [],
      input_name1: "",
      zzzs_input_num: "",
      input_name3: "",
      input_name4: "",
      input_name6: "",
      input_name7: "",
      num1: 200,
      dataList: [],
      this_name: "",
      testtext2: [],
      testarray: null,
      testarray2: null,
      testtime: null,
      testtime2: null,
      testarray3: null,
      testarray4: null,
      array1: "",
      main_markline: [],
      calculate_array_active: 0,
      active_index: 10,
      left_active: false,
    };
  },
  components: {
    histogramFund,
    classification,
    analysisTab,
    calculateStopLossBox,
    indexView,
    sectionBox2: () => import("./indexItem/sectionBox2.vue"),
    sectionBox4: () => import("./indexItem/sectionBox4.vue"),
  },
  created() {
    this.initializeData();
  },
  methods: {
    // 初始化数据
    initializeData() {
      this.input_name1 = "300750";
      this.btn_array = btn_array2;
      this.dealBtnArray(btn_array2);
      this.toBtn();
    },
    async dealBtnArray(this_deal_data) {
      try {
        const deal_data = await excelUtil.getExcelData(my_hold_sector);
        const typeDataMap = {};
        deal_data.forEach(item => {
            typeDataMap[item.type] = item;
        });
        const matched = [];
        const unmatched = [];
        this_deal_data.forEach(item => {
            if (typeDataMap[item.tip]) {
                const newItem = { ...typeDataMap[item.tip] , ...item};
                matched.push(newItem);
            } else {
                unmatched.push(item);
            }
        });
        const sortedData1 = [...matched, ...unmatched];
        this.btn_array = sortedData1;
      } catch (error) {
        console.error("Error getting Excel data:", error);
      }
    },
    cellStyle({ rowIndex, columnIndex }) {
      return rowIndex === 8 && columnIndex === 8 ? "" : "";
    },
    async getAjax(url) {
      if (!url) return "";
      try {
        const response = await $.ajax({ url });
        return response.data;
      } catch (error) {
        console.error(`Error fetching data from ${url}:`, error);
        return "";
      }
    },
    toBtn1(num, index) {
      this.input_name1 = num;
      this.active_index = index+3;
      this.toBtn(1);
    },
    switchAction(num) {
      switch (num) {
        case 0: return "待定";
        case 1: return "横盘中0.5到-1";
        case 2: return "盈利";
        case 3: return "亏损";
        default: return "";
      }
    },
    dealMoney(data) {
      if (data < 1000) return (data / 100).toFixed(1) + "百";
      if (data < 10000) return (data / 1000).toFixed(1) + "千";
      if (data < 1000000) return (data / 10000).toFixed(1) + "万";
      return data;
    },
    dealTime(data, time) {
      const data1 = [];
      let index1 = 0;
      for (let i = 1; i < 13; i++) {
        const num1 = i < 10 ? `-0${i}` : `-${i}`;
        const time_item = time[index1] ? time[index1].slice(4, 7) : "";
        if (time_item === num1) {
          data1.push(data[index1]);
          index1++;
        } else {
          data1.push("--");
        }
      }
      return data1;
    },
    dealMoth(dataList) {
      const array1 = [];
      let item1 = [];
      let time1 = null;
      let time2 = [];
      dataList.time.forEach((element, index) => {
        const year = element.slice(0, 4);
        if (time1 === year) {
          item1.push(dataList.array[index]);
          time2.push(element.slice(0, 7));
          if (index + 1 === dataList.time.length) {
            array1.push({
              name: time1,
              array: this.dealTime(item1, time2),
              time: time2
            });
          }
        } else {
          if (time1 !== null) {
            array1.push({
              name: time1,
              array: this.dealTime(item1, time2),
              time: time2
            });
          }
          item1 = [dataList.array[index]];
          time1 = year;
          time2 = [element.slice(0, 7)];
        }
      });
      this.datalist_table2 = array1;
    },
   
    // 判断是否在交易时间内
    isTradingTime() {
      const currentHour = new Date().getHours();
      return currentHour >= 9 && currentHour <= 15;
    },
    async toBtn(index) {
      if (index === 2) return;
      this.viewType = false;
      this.array_all = [];
      this.this_name = "";
      const [array1, array2, array3, array4, szzs, array5, array6, array7] = await Promise.all([
        this.getAjax(switchUrlDeal(1, this.input_name1, 1)),
        this.getAjax(switchUrlDeal(1, this.zzzs_input_num, 1)),
        this.getAjax(switchUrlDeal(1, this.input_name3, 1)),
        this.getAjax(switchUrlDeal(1, this.input_name4, 1)),
        this.getAjax(switchUrlDeal(10, "")),
        this.getAjax(switchUrlDeal(6, this.input_name1)).then(res => res.klines),
        this.getAjax(switchUrlDeal(7, this.input_name1)).then(res => res.klines),
        this.getAjax(urlDeal(this.input_name1, 2)).then(res => res.klines)
      ]);
      this.datalist_table = dealData(
        await this.getAjax(urlDeal(this.input_name1, 3)).then(res => res.klines),
        2,
        "月数据",
        2
      );
      this.dealMoth(this.datalist_table);
      this.array_all = [array1, array2, array3, array4, szzs, array5, array6, array7];
      this.main_datalist_table = this.datalist_table;
      array5.splice(0, 2);
      if (this.isTradingTime()) {
        array5.push(array6.slice(-1)[0]);
      }
      this.this_name = array1.name;
      setTimeout(() => {
        this.viewType = true;
      }, 2500);
    },
  }
};
</script>    

<style scoped lang="scss">

.title-item {
  display: flex;
  color: #a5a5a5;
  width: 120px;
  .tba-nav {
    position: relative;
    overflow: hidden;
    padding: 5px 0px;
    text-align: center;
  }
 
  .select{
    color: #8d734c;
    font-weight: 600;
    padding: 5px 0px;
  }
  .right_box {
    background-color: darkgrey;
    padding: 10px;
  }

  p {
    font-weight: 400;
    font-size: 14px;
    margin-top: 5px;
  }
}

.title-item.active {
  background-color: #a0a0a0;
    padding: 0px 5px;
    border-radius: 10px;

  .tba-nav {
    font-weight: 600;
    color: #ffffff;
    font-size: 14px;
  }
}

.left_btn {
  width: 250px;
    height: 40px;
    margin: 0px 15px 0px 0px;
    font-weight: 600;
    border-radius: 10px;
    color: white;
    background-color: #67c23a;
}
.left-nav {
  transition: all 0.2s linear;
  width: 140px;
  .left-main {
    height: 100vh;
  }
  .item_btn{
    padding: 15px 10px;
    color: white;
    font-size: 16px;
    width: 100px;
  }
  ul{
    margin-left: 20px;
    transition: all 0.2s linear;
    padding-left: 10px;
  }
}
.right-main {
  background-color: #ffffff;
 
  overflow: hidden;
    .bar{
      width: 600px;
    padding: 0px;
    margin: 5px 10px;
    border-radius: 10px;
    }
}
.left_active {
  width:0px ;
}
.ge {
      width: 40px;
      height: 20px;
    }

.analysis {
  display: flex;
  background: linear-gradient(135deg, #343434, #343434);
  .main {
    background-color: white;
    overflow: hidden;
    position: relative;
    flex: 1;
  }
 
  .active1 {
    color: #ff3d00;
    font-size: 14px;
    font-weight: 600;
  }

  .active2 {
    color: green;
    font-size: 14px;
    font-weight: 600;
  }

  p {
    font-weight: 400;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>